<template>
  <div>
    <el-dialog
      title="配置货品"
      v-loading="productsLoading"
      :visible.sync="visible"
      :before-close="close"
      :close-on-click-modal="false"
      width="80%">
      <el-tag
        v-for="product in products"
        :key="product.productId"
        :type="product.productId == 0 ? 'danger' : 'success'"
        closable
        @close="handleClose(product)"
        class="point"
        @click="showProductInfo(product)">
        {{ product.productName + ' ' + product.productGmp}}
      </el-tag>
      <product-select ref="productSelect" @getProduct="getProduct" @showProductSelect="showProductSelect" :childDataForm="grandDataForm" v-if="productSelectVisible"></product-select>
      <el-button class="button-new-tag" size="small" @click="showProductSelect">+ 货 品</el-button>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" class="pan-btn primary-btn" :loading="submiting" @click="submit">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="货品详情"
      :visible.sync="productInfoVisible"
      @close="closeProductInfo"
      :close-on-click-modal="true"
      width="50%">
      <el-form>
        <el-form-item>
          <span>货品编号：{{productInfo.productId}}</span>
        </el-form-item>
        <el-form-item>
          <span>品名：{{productInfo.productName}}</span>
        </el-form-item>
        <el-form-item>
          <span>gmp编码：{{productInfo.productGmp}}</span>
        </el-form-item>
        <el-form-item>
          <span>货品规格：<span v-html="productInfo.productSpec"></span></span>
        </el-form-item>
        <el-form-item v-if="productInfo.productValidity != null">
          <span>有效期：{{productInfo.productValidity}}月</span>
        </el-form-item>
        <el-form-item>
          <span>货品分类：{{productInfo.productCategoryName}}</span>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
	import { updateProjectCollocate } from '@/api/stability'
	import { getProductListByProjectId } from '@/api/product'
	import { CODE_OK } from '@/common/js/config'
  import { isBlank } from '@/common/js/utils'
	import ProductSelect from './product-select'
	export default {
		components: {
			ProductSelect
		},
		data () {
			return {
				visible: false,
				products: [{productId: 0,productName: '请添加', productGmp: '货品'}],
				productSelectVisible: false,
				project: {},
				productsLoading: false,
				productInfoVisible: false,
				productInfo: {},
        submiting: false,
        grandDataForm: ''
			}
		},
    props: ["childDataForm"],
    created() {
    	if (!isBlank(this.childDataForm)) {
        this.project = this.childDataForm
        this.init()
        this.visible = true
    	}
    },
  	methods: {
      init() {
      	this.productsLoading = true
      	const params = {
          projectId: this.project.projectId
        }
      	getProductListByProjectId(params).then(res => {
      		if (res.code === CODE_OK) {
            if (res.list.length != 0) {
              this.products = res.list
            }
      		}else{
      			this.$message.error(res.msg)
      		}
          this.productsLoading = false
      	}).catch()
      },
  		submit() {
  			if (this.products.length == 1 && this.products[0].productId == 0) {
  				this.$message.error("请选择至少一个货品")
  				return
  			}
        this.submiting = true
  			let productIds = this.products.map(product => {
  				return product.productId
  			})
  			const data = {
  				projectId: this.project.projectId,
  				productIds: productIds
  			}
  			updateProjectCollocate(data).then(res => {
  				if (res.code === CODE_OK) {
  					this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: this.close()
          	})
  				}else{
  					this.$message.error(res.msg)
            this.submiting = false
  				}
  			})
  		},
  		closeProductInfo() {
  			this.productInfo = {}
  			this.productInfoVisible = false
  		},
  		showProductInfo(product) {
        if (product.productId == 0) {
          this.$message.error("请添加货品")
          return
        }
  			this.productInfo = product
  			this.productInfoVisible = true
  		},
  		getProduct(products) {
        let prod = products.length ? products : [products]
        if (this.products[0].productId == 0) {
          this.products.pop()
          this.products = this.products.concat(prod)
        }else{
          let re = false
          for (let i=0,j=prod.length; i<j; i++) {
            for (let x=0,y=this.products.length; x<y; x++) {
              if (prod[i].productId == this.products[x].productId) {
                re = true
                break
              }
              if (x==y-1) {
                this.products.push(prod[i])
              }
            }
          }
          if (re) {
            this.$message.info('系统已自动过滤重复货品')
          }
        }
  		},
  		showProductSelect() {
        this.grandDataForm = {
          isMultiple: true,
          notStandard: true
        }
  			this.productSelectVisible = !this.productSelectVisible
  		},
  		handleClose(product) {
        if (product.productId == 0) {
          return
        }
        this.products.splice(this.products.indexOf(product), 1)
        if (this.products.length == 0) {
          this.products.push({productId: 0,productName: '请添加货品'})
        }
     	},
  		close() {
  			this.visible = false
        this.$emit("close")
  		}
  	}
	}
</script>

<style scoped>
	.el-tag + .el-tag {
    margin-left: 10px;
    margin-top: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>
